<template>
  <div class="content">
    <div class="content">
      <div class="header_box">
        <div class="header_left">维修站</div>
        <div class="header_right">
          <el-form :inline="true" :model="searFrom" class="form_box">
            <el-form-item>
              <el-input
                v-model="searFrom.name"
                placeholder="xxx"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="searFrom.code"
                placeholder="xx"
                style="width: 200px"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="init">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }"
        max-height="500"
      >
        <el-table-column type="index" :index="indexMethod" />
        <el-table-column prop="ipSegment" label="问题IP或IP段" />
        <el-table-column prop="productTag" label="涉及产品标签" />
        <el-table-column prop="isActive" label="是否恢复" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <div class="icon_content">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="编辑"
                placement="top-start"
              >
                <div class="icon_box">
                  <el-icon @click="edit(row)" size="20" color="#71778d"
                    ><EditPen
                  /></el-icon>
                </div>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top-start"
              >
                <div class="icon_box_d">
                  <el-icon @click="remove(row)" size="20" color="#71778d"
                    ><Remove
                  /></el-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_box">
        <el-pagination
          v-model:current-page="searFrom.pageNo"
          v-model:page-size="searFrom.pageSize"
          :page-sizes="[10, 50, 100, 150]"
          :small="small"
          :disabled="false"
          :background="true"
          layout="sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 维修站 -->
    <el-dialog v-model="repairVis" title="维修站" width="500">
      <el-form label-position="right" :model="objectForm">
        <el-form-item label="问题IP或IP段">
          <el-input v-model="objectForm.ipSegment" />
        </el-form-item>
        <el-form-item label="涉及产品标签">
          <el-input v-model="objectForm.productTag" />
        </el-form-item>
        <el-form-item label="是否恢复">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="objectForm.isActive"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="objectForm.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="repairVis = false">取消</el-button>
          <el-button type="primary" @click="confirmRepair"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { defineOptions, ref, onBeforeMount } from "vue";
import * as tenantApi from "../../api/project1/ip/ip.js";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import confirm from "../../utils/ElMessageUtils.js";

defineOptions({ name: "ip" });

const tableData = ref([
  {
    ipSegment: "192.168.0.0/24",
    productTag: "标签A",
    isActive: 1,
    remark: "需要检查",
  },
  {
    ipSegment: "10.0.0.0/8",
    productTag: "标签B",
    isActive: 0,
    remark: "已恢复",
  },
  // 可以根据需要添加更多初始化数据
]);

const objectForm = ref({
  ipSegment: "",
  productTag: "",
  isActive: 0,
  remark: "",
});

const router = new useRouter();

let searFrom = ref({
  pageNo: 1,
  pageSize: 10,
  excludeCode: "admin",
});

let total = ref(0);

let repairVis = ref(false);

const init = async () => {
  const res = await tenantApi.page(searFrom.value);
  const { records } = res;
  tableData.value = records;
  total.value = res.total;
};

const confirmRepair = async () => {
  const res = await tenantApi.saveOrUpdate(objectForm.value);
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("维修操作成功");
    repairVis.value = false;
    init();
    return;
  }
  ElMessage.error(msg);
};

const remove = async (row) => {
  const b = await confirm("您确定要删除吗？");
  if (!b) {
    return;
  }
  const res = await tenantApi.remove({ id: row.id });
  const { code, msg } = res;
  if (code == "200") {
    ElMessage.success("操作成功");
    init();
    return;
  }
  ElMessage.error(msg);
};

const edit = (row) => {
  console.log("编辑行数据:", row);
  objectForm.value = { ...row };
  repairVis.value = true;
};

onBeforeMount(() => {
  // init();
});
</script>

<style lang="less" scoped>
.header_right {
  background-color: #ffffff;
  justify-content: flex-end;
  border-radius: 0px 15px 0px 0px;
}
:deep(.form_box) {
  width: 80%;
  height: 40%;
  margin: 0px;
  display: flex;
  justify-content: flex-end;
}
.header_left {
  border-radius: 15px 0px 0px 0px;
  font-weight: 700;
}
</style>